<%--
  Created by IntelliJ IDEA.
  User: 86180
  Date: 2021/2/3
  Time: 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html class="app-ui">

<head>
    <!-- Meta -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <!-- Document title -->
    <title>商品详情</title>

    <meta name="description" content="AppUI - Frontend Template & UI Framework" />
    <meta name="robots" content="noindex, nofollow" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css">
    <!-- Favicons -->
    <link rel="apple-touch-icon" href="${pageContext.request.contextPath}/assets/img/favicons/apple-touch-icon.png" />
    <link rel="icon" href="${pageContext.request.contextPath}/assets/img/favicons/favicon.ico" />

    <!-- AppUI CSS stylesheets -->
    <link rel="stylesheet" id="css-font-awesome" href="${pageContext.request.contextPath}/assets/css/font-awesome.css" />
    <link rel="stylesheet" id="css-ionicons" href="${pageContext.request.contextPath}/assets/css/ionicons.css" />
    <link rel="stylesheet" id="css-bootstrap" href="${pageContext.request.contextPath}/assets/css/bootstrap.css" />
    <link rel="stylesheet" id="css-app" href="${pageContext.request.contextPath}/assets/css/app.css" />
    <link rel="stylesheet" id="css-app-custom" href="${pageContext.request.contextPath}/assets/css/app-custom.css" />
    <!-- End Stylesheets -->
</head>

<body class="app-ui layout-has-fixed-header">
<div class="app-layout-canvas">
    <div class="app-layout-container">

        <!-- Header -->
        <header class="app-layout-header">
            <nav class="navbar navbar-default col-lg-offset-1">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse"
                                aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
                            <span class="sr-only">Toggle drawer</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="javascript:void(0)">
                            <img class="img-responsive" src="${pageContext.request.contextPath}/assets/img/logo/logo-frontend.png" title="强强组合商城" alt="AppUI" />
                        </a>
                    </div>

                    <div class="collapse navbar-collapse" id="header-navbar-collapse">
                        <ul id="main-menu" class="nav navbar-nav navbar-left">

                            <li class="active">
                                <a href="${pageContext.request.contextPath}/jsp/home/frontend_home.jsp">首页</a>
                            </li>

                            <li>
                                <a href="frontend_about.html">关于</a>
                            </li>

                            <li>
                                <a href="frontend_pricing.html">Pricing</a>
                            </li>

                            <li>
                                <a href="frontend_team.html">Team</a>
                            </li>

                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown">分类 <span class="caret"></span></a>
                                <ul class="dropdown-menu">

                                    <li>
                                        <a href="frontend_search.html">Search</a>
                                    </li>

                                    <li>
                                        <a href="frontend_support.html">Support</a>
                                    </li>

                                    <li>
                                        <a href="frontend_contact.html">Contact</a>
                                    </li>

                                    <li>
                                        <a href="frontend_login_signup.html">Login / Signup</a>
                                    </li>

                                    <li>
                                        <a href="frontend_400.html">Error 400</a>
                                    </li>

                                </ul>
                            </li>

                        </ul>
                        <!-- .navbar-left -->

                        <ul class="nav navbar-nav navbar-right navbar-toolbar hidden-sm hidden-xs w-30">
                            <li class="active" id="business">
                                <a href="frontend_home.html">注册为商家</a>
                            </li>
                            <li class="active" id="deliver">
                                <a href="frontend_home.html">注册为配送员</a>
                            </li>
                            <li class="dropdown">
                                <a href="javascript:void(0)" data-toggle="dropdown"><i class="ion-ios-bell"></i> <span class="badge">3</span></a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li class="dropdown-header">消息</li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span> 有无内鬼？ </a>
                                    </li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span> 不过如此 </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li class="dropdown-header">公告</li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)">登dua郎..</a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown dropdown-profile">
                                <a href="javascript:void(0)" data-toggle="dropdown">
                                    <span class="m-r-sm">${account.accName}<span class="caret"></span></span>
                                    <img class="img-avatar img-avatar-48" src="${pageContext.request.contextPath}/file/acc/${account.accImg == null?"000000011612245316757212.png":account.accImg}" alt="User profile pic" />
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/jsp/MyAccount/MyMoneyRecord.jsp">个人账户</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)">我的购物车</a>
                                    </li>
                                    <li>
                                        <a href="#" id="logout">退出</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <!-- .navbar-right -->
                    </div>
                </div>
                <!-- .container-fluid -->
            </nav>
            <!-- .navbar -->
        </header>

        <main class="app-layout-content">
            <!-- Features 1 -->
            <div class="section bg-white p-y-xl">
                <div class="container">
                    <!-- .row -->
                    <div class="row vcenter-md">
                        <div class="col-md-5 hidden-sm hidden-xs">
                            <div id="myCarousel" class="carousel slide">
                                <ol class="carousel-indicators" id="lunbo">
                                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

                                </ol>
                                <!-- 轮播（Carousel）项目 -->
                                <div class="carousel-inner" id="imgContent">
                                    <div class="item active" id="defaultImg">
                                        <img src="${pageContext.request.contextPath}/assets/img/misc/frontend_about2.png" alt="First slide">
                                    </div>
                                        <div class="item">
                                            <img src="${pageContext.request.contextPath}/assets/img/misc/frontend_about1.png" alt="Second slide">
                                        </div>
                                        <div class="item">
                                            <img src="${pageContext.request.contextPath}/assets/img/misc/frontend_about3.png" alt="Third slide">
                                        </div>
                                </div>
                                <!-- 轮播（Carousel）导航 -->
                                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                        <!-- .col-md-6 -->

                        <div class="col-md-4 col-md-offset-1">
                            <ol class="list white">
                                <li>
                                    <p class="h2"><span id="goNm">iPhone 99999x</span></p>
                                    <p class="m-b-lg"><span id="goDp">具有未来科技感的iPhone 99999x,史上最低价,买到就是赚到!!!!!!!!!!!!!!</span></p>
                                </li>
                                <li>
                                    <p class="h4">单价：<span style="color: red;" id="goPrice">999.99</span> 元</p>
                                    <p class="h4">库存：<span id="goStock"></span> 件</p>
                                    <button class="btn btn-app col-lg-4" type="button" data-toggle="tooltip" title="买吧，这还挺好的" id="buyGoods"><span>购买&nbsp;&nbsp;&nbsp;</span><i
                                            class="fa fa-cube"></i></button>
                                    <button class="btn btn-app-orange col-lg-5" style="left: 50px;" type="button" data-toggle="tooltip" title="稍后再买" id="addBuyCart"><span>加入购物车&nbsp;&nbsp;&nbsp;</span><i
                                            class="fa fa-cart-plus"></i></button>
                                </li>
                            </ol>
                        </div>
                        <!-- .col-md-4-->
                    </div>
                    <!-- .row -->
                </div>
                <!-- .container -->
            </div>
            <!-- .section -->
            <!-- End features 1 -->

            <!-- Features 2 -->
            <div class="section p-y-xl">
                <div class="container">
                    <div class="row vcenter-md">
                        <div class="col-md-12">
                            <ol class="list">
                                <li>
                                    <p class="h2">商品评价</p>
                                    <p class="m-b-lg">
                                        &nbsp;&nbsp;&nbsp;&nbsp;好评率：<span id="reputablyRatio"></span>%
                                        <button class="btn btn-default" style="margin-left: 300px;" type="button" data-toggle="tooltip" title="好" id="good"><span>好评&nbsp;&nbsp;&nbsp;</span><i
                                                class="fa fa-smile-o"></i></button>
                                        <button class="btn btn-default" style="margin-left: 10px;" type="button" data-toggle="tooltip" title="一般" id="general"><span>中评&nbsp;&nbsp;&nbsp;</span><i
                                                class="fa fa-meh-o"></i></button>
                                        <button class="btn btn-default" style="margin-left: 10px;" type="button" data-toggle="tooltip" title="差" id="negative"><span>差评&nbsp;&nbsp;&nbsp;</span><i
                                                class="fa fa-frown-o"></i></button>
                                    </p>
                                </li>
                                <div id="evaluate">

                                </div>
                            </ol>
                            <br />
                            <br />
                            <div class="text-center">
                                <button class="btn btn-info" type="button" data-toggle="tooltip" title="首页" id="first"><i class="fa fa-angle-double-left"></i></button>&nbsp;&nbsp;&nbsp;
                                <button class="btn btn-info" type="button" data-toggle="tooltip" title="上一页" id="left"><i class="fa fa-angle-left"></i></button>&nbsp;&nbsp;&nbsp;
                                <button class="btn btn-info" type="button" data-toggle="tooltip" title="下一页" id="right"><i class="fa fa-angle-right"></i></button>&nbsp;&nbsp;&nbsp;
                                <button class="btn btn-info" type="button" data-toggle="tooltip" title="尾页" id="last"><i class="fa fa-angle-double-right"></i></button>&nbsp;&nbsp;&nbsp;
                                总页数:<span id="allGoodsPage"></span>&nbsp;&nbsp;当前为第<span id="pageCurrent"></span>页
                            </div>
                        </div>
                        <!-- .col-md-5 -->

                        <!-- .col-md-5 -->
                    </div>
                    <!-- .row -->
                </div>
                <!-- .container -->
            </div>
            <!-- .section -->
            <!-- End features 2 -->


        </main>

        <footer class="app-layout-footer">
            <!-- .section -->

            <div class="section p-y-xl bg-app bg-inverse">
                <div class="container text-center">
                    <!-- .row -->
                    <div class="row p-t-md p-b-lg">
                        <div class="col-md-10 col-md-offset-1">
                        </div>
                    </div>
                    <!-- .row -->
                </div>
                <!-- .container -->
            </div>
            <!-- .section -->
        </footer>

    </div>
    <!-- .app-layout-container -->
</div>
<!-- .app-layout-canvas -->

<!-- Apps Modal -->
<!-- Opens from the button in the header -->
<div id="apps-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-sm modal-dialog modal-dialog-top">
        <div class="modal-content">
            <!-- Apps card -->
            <div class="card m-b-0">
                <div class="card-header bg-app bg-inverse">
                    <h4>Apps</h4>
                    <ul class="card-actions">
                        <li>
                            <button data-dismiss="modal" type="button"><i class="ion-close"></i></button>
                        </li>
                    </ul>
                </div>
                <div class="card-block">
                    <div class="row text-center">
                        <div class="col-xs-6">
                            <a class="card card-block m-b-0 bg-app-secondary bg-inverse" href="index.html">
                                <i class="ion-speedometer fa-4x"></i>
                                <p>Admin</p>
                            </a>
                        </div>
                        <div class="col-xs-6">
                            <a class="card card-block m-b-0 bg-app-tertiary bg-inverse" href="frontend_home.html">
                                <i class="ion-laptop fa-4x"></i>
                                <p>Frontend</p>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- .card-block -->
            </div>
            <!-- End Apps card -->
        </div>
    </div>
</div>
<!-- End Apps Modal -->

<!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.scrollLock.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.placeholder.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/app.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/app-custom.js"></script>
<script type="text/javascript">
    $(function () {
        var accId = ${account.accId};
        var goId = ${param.xxwhatId}/1024;
        var pageSize = 2;
        var pageCurrent = 1;
        $("#pageCurrent").html(pageCurrent)
        var goodsCount=0;//数据笔数
        var allGoodsPage = 1;//总页数
        var opiType = null;
        getGoodsInfo();
        getGoodsImg();
        getEvaluate();
        //获取商品详情
        function getGoodsInfo() {
            var url = "${pageContext.request.contextPath}/goods/selectGoodsByGoId";
            var param = {
                goId:goId
            };
            $.get(url,param,function (data) {
                if (data.code == 1001){
                    $("#reputablyRatio").html(data.goods.reputablyRatio);   //设置好评率
                    $("#goNm").html(data.goods.goNm);                       //设商品名称
                    $("#goDp").html(data.goods.goDp);                       //设商品详细
                    $("#goPrice").html(data.goods.goPri);                   //设商品价格
                    $("#goStock").html(data.goods.goodsStock);              //设商品库存
                }
            });
        }
        //获取商品图片
        function getGoodsImg() {
            var url = "${pageContext.request.contextPath}/goods/selectGoodsImgUrl";
            var param = {
                goId:goId
            };
            $.get(url,param,function (data) {
                var imgContent = "";
                var lunbo = $("#lunbo").html();
                if (data.code == 1001){
                    for (var i = 0; i < data.imgUrl.length; i++){
                        if (i == 0){
                            imgContent += "<div class='item active' style='height: 265px;'>"
                            imgContent += "<img src='${pageContext.request.contextPath}/file/goodsInfo/"+data.imgUrl[0]+"' alt='First slide'>";
                            imgContent += "</div>"
                        }else {
                            imgContent += "<div class='item' style='height: 265px;'>";
                            imgContent += "<img src='${pageContext.request.contextPath}/file/goodsInfo/"+data.imgUrl[i]+"' alt='Third slide'>";
                            imgContent += "</div>"
                            lunbo += "<li data-target='#myCarousel' data-slide-to='"+i+"'></li>";
                        }
                    }
                    $("#lunbo").html(lunbo);
                    $("#imgContent").html(imgContent);
                }
            });
        }
        //获取商品评价evaluate
        function getEvaluate() {
            var url = "${pageContext.request.contextPath}/goods/selectOpinionInfoByGoId";
            var param = {
                goId:goId,
                opiType:opiType,
                pageCurrent: pageCurrent,
                pageSize:pageSize
            };
            $.get(url,param,function (data) {
                if (data.code == 1001){
                    goodsCount = data.opinionNum;
                    allGoodsPage = parseInt((goodsCount+1)/pageSize);
                    $("#allGoodsPage").html(allGoodsPage);
                    $("#evaluate").html("");
                    var content = "";
                    for (var i = 0; i < data.opinions.length; i++) {
                        var Name = data.opinions[i].accImg == null?"000000011612245316757212.png":data.opinions[i].accImg;
                        content += "<li>";
                        content += "<p class='h4'>";
                        content += "<img class='img-avatar img-avatar-48' src='${pageContext.request.contextPath}/file/acc/"+Name+"' alt='User profile pic' />&nbsp;&nbsp;";
                        content += "<span>"+data.opinions[i].accName+"</span>";
                        if (data.opinions[i].opiType == 1){
                            content += "<code style='margin-left: 20px;'>好评</code>";
                        }else if (data.opinions[i].opiType == 2){
                            content += "<code style='margin-left: 20px;'>中评</code>";
                        }else{
                            content += "<code style='margin-left: 20px;'>差评</code>";
                        }
                        content += "</p>";
                        content += "<p class='m-b-lg'>"+data.opinions[i].opiContent+"</p>";
                        content += "<div class='row'>";
                        for (var j = 0; j < data.opinions[i].opinionFile.length; j++) {
                            if (j == 2){
                                content += "</div><div class='row'>";
                            }
                            content += "<div class='col-lg-3'>";
                            content += "<div class='card'>";
                            content += "<img class='img-responsive' src='${pageContext.request.contextPath}/file/opinionFile/"+data.opinions[i].opinionFile[j]+"' alt='User profile pic' style='width:261px;height:147px;' />";
                            content += "</div></div>";
                        }
                        content += "</div>";
                        content += "<p class='pull-right hidden-sm hidden-xs'>"+data.opinions[i].opiTime+"</p>"
                        content += "</li>";
                    }
                    $("#evaluate").html(content);

                }else {
                    $("#evaluate").html("<span>暂无评价</span>")
                }
            });
        }
        /*  购买商品    */
        $("#buyGoods").click(function () {
            if ($("#goStock").html() == 0){
                alert("库存不足！已提醒商家补货");
                return false;
            }
            var url = "${pageContext.request.contextPath}/goods/buyGoodsByAccIdAndGoId";
            var param = {
                accId:accId,
                goIdString:goId,
                _method:"put"
            };
            $.post(url,param,function (data) {
                if (data.code == 1001){
                    window.location.href = "${pageContext.request.contextPath}/jsp/MyOrder/ensure_order.jsp?ordId="+data.ordId;
                }
            });
        });
        $("#addBuyCart").click(function () {
            if ($("#goStock").html() == 0){
                alert("库存不足！已提醒商家补货");
                return false;
            }
            var url = "${pageContext.request.contextPath}/shopCart/addOrUpdateShopCartByAccIdAndGoId";
            var param = {
                goId:goId,
                accId:accId,
                _method: "put"
            }
            $.post(url,param,function (data) {
                if (data.code == 1001){
                    alert("加入购物车成功！");
                }else {
                    alert("加入购物车失败！");
                }
            });
        });

        /*  好，中，差评按钮--start   */
        $("#good").click(function () {
            if (opiType == 1){
                opiType = null;
            }else{
                opiType = 1;
            }
            pageCurrent = 1;
            $("#pageCurrent").html(pageCurrent);
            getEvaluate();
        });
        $("#general").click(function () {
            if (opiType == 2){
                opiType = null;
            }else {
                opiType = 2;
            }
            pageCurrent = 1;
            $("#pageCurrent").html(pageCurrent);
            getEvaluate();
        });
        $("#negative").click(function () {
            if (opiType == 3){
                opiType = null;
            }else {
                opiType = 3;
            }
            pageCurrent = 1;
            $("#pageCurrent").html(pageCurrent);
            getEvaluate();
        });
        /*  好，中，差评按钮--end   */

        /* 分页按钮--start */
        $("#right").click(function () {
            if (allGoodsPage < pageCurrent+1){
                return false;
            }
            pageCurrent += 1;
            $("#pageCurrent").html(pageCurrent)
            getEvaluate();
        })
        $("#left").click(function () {
            if (pageCurrent-1 < 1){
                return false;
            }
            pageCurrent -= 1;
            $("#pageCurrent").html(pageCurrent)
            getEvaluate();

        })
        $("#first").click(function () {
            if (pageCurrent == 1){
                return false;
            }
            pageCurrent = 1;
            $("#pageCurrent").html(pageCurrent)
            getEvaluate();
        });
        $("#last").click(function () {
            if (pageCurrent == allGoodsPage){
                return false;
            }
            pageCurrent = allGoodsPage;
            $("#pageCurrent").html(pageCurrent)
            getEvaluate();
        });
        /* 分页按钮--end */

        /*动态显示首页头部*/
        var role = ${account.role};
        if(role == 2){
            $("#business").html("<a href='../business/UnFinishOrder.jsp'>商家后台</a>");
            $("#deliver").html("");
        }
        if(role == 3){
            $("#business").html("");
            $("#deliver").html("<a href='#'>配送员后台</a>");
        }
        /*退出登录*/
        $("#logout").click(function (event){
            event.preventDefault();
            var url = "/login/logoutShop";
            $.post(url,function (){
                window.location.href = "../../login.jsp";
            })
        })
    });
</script>
</body>

</html>
